<template>
  <view class="content">
    <!-- 头部 -->
    <yHeader
      :current="null"
      :screenWidth="screenWidth"
      @Tabs="handleTabs"
      @EditLogin="handleExit"
    ></yHeader>
    <!-- PC内容 -->
    <view v-if="screenWidth > 480" class="bg-grey pt-4" style="width: 100%">
      <view class="__inner bg-white cont">
        <view class="left">
          <view class="title">
            <text>已参与溯源的农户,公司</text>
          </view>
          <view class="Num">
            <view class="item">
              <view>{{ form.city }}</view>
              <view>本省已参与溯源的市</view>
            </view>
            <view class="item">
              <view>{{ form.district }}</view>
              <view>本省已参与溯源的县</view>
            </view>
            <view class="item">
              <view>{{ form.enterprise }}</view>
              <view>本省已参与溯源的农户</view>
              <el-button type="primary" size="small" @click="go"
                >前往溯源服务</el-button
              >
            </view>
            <view class="item">
              <view>{{ form.enterprise }}</view>
              <view>本省已参与溯源的公司</view>
            </view>
          </view>
        </view>
        <view class="right">
          <!-- <el-breadcrumb separator="/">
					  <el-breadcrumb-item class="font-md" v-for="(item,index) in address" :key="index">{{item}}</el-breadcrumb-item>
					</el-breadcrumb> -->
          <BreadcrumbNavigation
            @name="name"
            :BreadData="address"
          ></BreadcrumbNavigation>
          <view v-if="select" class="charts-box">
            <qiun-data-charts
              :onzoom="true"
              :ontouch="true"
              :active="true"
              :reload="reload"
              :reshow="reshow"
              :ontap="true"
              @complete="complete"
              @getIndex="getIndex"
              type="map"
              :opts="opts"
              :chartData="chartData"
            />
            <block v-for="(item, index) in markPoints" :key="index">
              <view
                class="points-box"
                :style="{ top: item.y - 30 + 'px', left: item.x - 20 + 'px' }"
                @click="clickPoint(item)"
              >
                <view style="padding-top: 1px">{{ item.value }}</view>
              </view>
            </block>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <yFooter Show v-if="screenWidth > 480" :screenWidth="screenWidth"></yFooter>
  </view>
</template>

<script>
const app = getApp();
import BreadcrumbNavigation from "@/components/BreadcrumbNavigation.vue";
import { Message } from "element-ui";
import yHeader from "@/components/yHeader.vue";
import yFooter from "@/components/yFooter.vue";
import { getJsonInquiry } from "@/api/global.js";
import { Traceabilitybase, Traceability } from "@/api/traceability.js";
function coordinateToPoint(
  longitude,
  latitude,
  bounds,
  scale,
  xoffset,
  yoffset,
  mercator
) {
  var x = longitude;
  var y = latitude;
  if (mercator == true) {
    x = (longitude * 20037508.34) / 180;
    y = Math.log(Math.tan(((90 + latitude) * Math.PI) / 360)) / (Math.PI / 180);
    y = (y * 20037508.34) / 180;
  }
  return {
    x: (x - bounds.xMin) * scale + xoffset,
    y: (bounds.yMax - y) * scale + yoffset,
  };
}
export default {
  data() {
    return {
      reshow: false,
      reload: false,
      select: true,
      ThemeColors: app.globalData.ThemeColors,
      screenWidth: uni.getSystemInfoSync().windowWidth,
      chartData: {},
      num: -1,
      opts: {
        color: [
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
        ],
        padding: [0, 0, 0, 0],
        dataLabel: true,
        enableScroll: false,
        extra: {
          map: {
            border: true,
            borderWidth: 1,
            borderColor: "#666666",
            fillOpacity: 0.6,
            activeBorderColor: "#F04864",
            activeFillColor: "#28a745",
            activeFillOpacity: 1,
          },
        },
      },
      series: [],
      cityinfo: {
        properties: {
          name: "黑龙江",
        },
      },
      citys: [],
      markPoints: [], //坐标点
      address: ["黑龙江省"],
      adcode: [230000],
      form: {},
    };
  },
  components: {
    yHeader,
    yFooter,
    BreadcrumbNavigation,
  },
  methods: {
    async getServerData(city = 230000) {
      //获取地图数据
      const res = await getJsonInquiry({
        data: {
          File: city + ".json",
        },
      });
      if (res.Status == "success") {
        this.series = JSON.parse(res.Data).features;
        this.chartData = {
          series: JSON.parse(res.Data).features,
        };
      }
    },
    getIndex(e) {
      if (e.currentIndex == -1) {
        if (this.address.length > 1) {
          this.address.pop();
          this.adcode.pop();
          this.cityinfo.properties.name = this.address[this.address.length - 1];
          this.getServerData(this.adcode[this.adcode.length - 1]);
          this.markPoints = [];
        }
      } else {
        if (this.address.length < 3) {
          this.address.push(e.opts.series[e.currentIndex].properties.name);
          this.adcode.push(e.opts.series[e.currentIndex].properties.adcode);
          this.getServerData(e.opts.series[e.currentIndex].properties.adcode);
          this.markPoints = [];
        }
      }
    },
    async complete(e) {
      //坐标点
      const res = await Traceabilitybase({
        data: {
          index:
            this.address.length == 3
              ? this.address.length
              : this.address.length + 1,
          city:
            this.address.length == 1
              ? this.address[0]
              : this.address[0] + "/" + this.address[1],
        },
      });
      let markPoints = [];
      if (res.Status === "success") {
        markPoints = res.Data;
        markPoints.forEach((item) => {
          item.longitude = this.getGps(item.name)[0];
          item.latitude = this.getGps(item.name)[1];
        });
      }
      const mapData = e.opts.chartData.mapData;
      for (var i = 0; i < markPoints.length; i++) {
        const points = coordinateToPoint(
          markPoints[i].longitude,
          markPoints[i].latitude,
          mapData.bounds,
          mapData.scale,
          mapData.xoffset,
          mapData.yoffset,
          mapData.mercator
        );
        markPoints[i].x = points.x;
        markPoints[i].y = points.y;
      }
      this.markPoints = markPoints;
    },
    getGps(str) {
      let arr = this.series.filter((item) => item.properties.name == str);
      if (arr.length == 1) {
        return arr[0].properties.center;
      }
      return [0, 0];
    },
    clickPoint(e) {
      uni.showModal({
        title: e.name,
        content: "当地溯源基地：" + e.value + "个，点击查看?",
        success: function (res) {
          if (res.confirm == true) {
            window.location.href =
              "https://digital.essc.top/dist/h5Test/baselarge/index.html";
          }
        },
      });
    },
    handleExit() {
      //退出
      uni.removeStorageSync("loginInfo");
      this.isLogin = false;
      this.getData(this.supplyForm, this.purchaseform);
    },
    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    go() {
      window.location.href =
        "https://digital.essc.top/dist/h5Test/baselarge/index.html";
    },
    async getData() {
      const res = await Traceability({
        data: {},
      });
      if (res.Status === "success") {
        this.form = res;
      }
    },
    name(e) {
      if (e == 0) {
        this.address = ["黑龙江省"];
        this.adcode = [230000];
      } else {
        this.address.splice(e + 1, 1);
        this.adcode.splice(e + 1, 1);
      }
      this.getServerData(this.adcode[e]);
    },
  },
  onReady() {
    this.getServerData();
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.cont {
  display: flex;
  align-items: center;
  min-height: 1200rpx;

  .left {
    width: 30%;
    height: 100%;
    padding: 40rpx 0 0 40rpx;
    box-sizing: border-box;
    font-size: 50rpx;
    font-weight: bold;

    //   border: 1px solid red;
    .title {
      margin: 20rpx 0 30rpx 0;

      .Title_attached {
        display: inline-block;
        text-align: right;
        font-size: 30rpx;
        font-weight: normal;
      }
    }

    .Num {
      width: 100%;
      height: auto;
      height: 75%;
      // border: 1px solid red;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;

      .item {
        margin: 40rpx 0 0 0;

        view:first-child {
          font-size: 70rpx;
          font-weight: bold;
        }

        view:last-child {
          font-size: 30rpx;
          color: #737373;
        }
      }
    }
  }

  .right {
    width: 70%;

    .charts-box {
      width: 100%;
      height: 1100rpx;
      position: relative;
      overflow: hidden;
    }
  }
}
.points-box {
  position: absolute;
  width: 25px;
  height: 25px;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  background: url("../../static/icon/point.png");
  cursor: pointer;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>